<template>
  <div o-Container>
    <div class="top_box">
      <!-- <div class="search_box">
        <img src="/static/skin/herodoo/main/platform/home/img/search.png" alt="">
        <input :value="searchValue" type="text" placeholder="请输入搜索内容" @keydown.enter="searchEnterKeyPress"
          @blur="searchEnterKeyPress">
      </div> -->
      <div class="button_box">
        <button @click="addNew">新建广告</button>
      </div>
    </div>
    <o-list v-bind:source="list.contract">
      <template slot="config" slot-scope="scope">
        <div class="img_box">
          <el-tooltip class="item" effect="dark" content="查看" placement="bottom">
            <img @click="showLookDiaolog(scope, 'look')" src="/static/skin/default/MCS/AIGC/Inventory/images/chakan.png"
              alt="">
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
            <img :class="{ is_opacity: scope.data.row.Status }" @click="showEditDialog(scope, 'UPDATE')"
              src="/static/skin/default/MCS/AIGC/Inventory/images/bianji.png" alt="">
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
            <img :class="{ is_opacity: scope.data.row.Status }" @click="del(scope)"
              src="/static/skin/default/MCS/AIGC/Inventory/images/shanchu.png" alt="">
          </el-tooltip>
        </div>
      </template>
    </o-list>
    <!-- <CatMsg ref="CatMsg" :messageList="messageList"></CatMsg> -->
    <CreateAdvertising ref="CreateAdvertising" :messageList="messageList" @reload="reload"></CreateAdvertising>
    <CheckAdvertising ref="CheckAdvertising" @reload="reload"></CheckAdvertising>
  </div>
</template>

<script>
import CreateAdvertising from './CreateAdvertising.vue'
import CheckAdvertising from './CheckAdvertising.vue'
export default {
  components: {
    CreateAdvertising,
    CheckAdvertising,
  },
  name: "mms_platform_company_list", /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */
  data() {
    return {
      octopus: this.$parent.octopus,
      list: {
        contract: {
          data: {
            id: 1265,
            cellData: [
              { name: "Name" },	// 广告名称
              { name: "PictureUrl" },	// 图片URL
              { name: "TypeID", show: false },	// 类型
              { name: "TypeName" },	// 类型名称
              { name: "StartTime", width: 150 },	// 开始时间
              { name: "EndTime", width: 150 },	// 结束时间
              { name: "LinkUrl", width: 240 },	// 跳转地址
              { name: "Sort" },	// 排行优先级
              { name: "Status", show: false },	// 状态
              { name: "StatusName" },	// StatusName
              { name: "CreateUserID", show: false },	// 修改人
              { name: "CreateUserIDName" },	// 修改人
              { name: "UpdateTime", width: 150 },	// 修改时间
              { name: "RangeType", show: false },	// 范围类型
              { name: "Count", show: false },	// 浏览次数
              { name: "CreateTime", show: false },	// 创建时间1165
              { name: "ID", show: false },	// ID
              { name: "IsDelete", show: false },	// 是否删除
              { name: "PlatformID", show: false },	// 投放平台
              { name: "PositionID", show: false },	// 位置
            ],
            paramData: {}
          },
          configWidth: 100,
          showNumber: true,
        },
      },
      messageList: {},
      messageListAdd: {},
      dialogType: 2,
      typeList: []
    }
  },
  created() {
  },
  methods: {

    showLookDiaolog(row) {
      this.$refs.CheckAdvertising.drawerOp(row.data.row)
    },
    showEditDialog(row, type = true) {
      if (row.data.row.Status) {
        return
      }
      this.$refs.CreateAdvertising.drawerOp(row.data.row, type)
    },
    output: function (data) {
      this.octopus.tips.success("下载完成。");
    },
    search: function (cell) {
    },
    addNew: function (data) {
      this.dialogType = 1
      this.messageListAdd = {}
      this.$refs.CreateAdvertising.drawerOp(null, 'CREATE')
    },
    save: function (data) {// 保存
      this.octopus.tips.success(data);
      // 刷新list
      this.list.contract.control.load();
      this.back();
    },
    reload() {
      this.list.contract.control.load();
    },
    back: function () {
      this.panel.visible = false;
    },
    del: function (row) {
      if (row.data.row.Status) {
        return
      }
      let o = this
      // alert("del key: " + JSON.stringify(row));
      this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.octopus.request.api.post("/Octopus/Engine/Item", {
          id: 1265, // 菜单表的八爪鱼ID
          type: "DELETE",
          value: row.data.row.ID,
          cellData: [],
        },
          // 处理回调事件，通过分析data.status.code的状态来实现。
          function (data) {
            if (data.status.code === 200) {
              o.list.contract.control.load();
            } else {
              o.octopus.tips.error(data);
            }
          }
        );
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    refresh() {
      this.list.contract.control.load();
    },
    lookRow(index, rows) {
      this.$refs.CheckAdvertising.drawerOp()
    },
  },
  props: ["oData"]
}
</script>
<style scoped>
.top_box {
  width: 100%;
  height: 5.3rem;
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  padding-bottom: 1.2rem;
  box-sizing: border-box;
  justify-content: flex-end;
}

.top_box .search_box {
  width: 32rem;
  height: 100%;
  border: 1px solid #F0F0F0;
  border-radius: 4rem;
  display: flex;
  justify-content: space-between;
  padding: 0 .8rem;
  box-sizing: border-box;
}

.top_box .search_box input {
  border: none;
  outline: none;
  width: 70%;
}

.top_box .search_box img {
  cursor: pointer;
}

.top_box .button_box button {
  width: 15rem;
  height: 100%;
  border-radius: 4rem;
  border: none;
  color: #fff;
  background-color: #F78C52;
  box-shadow: 0px -3px 4px 0px rgba(204, 190, 186, 0.4);
  font-size: 1.7rem;
  cursor: pointer;
}

.top_box .button_box button {
  margin-right: 1.3rem;
}

.el-message-box {
  background-color: #fff !important;
}

.img_box {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.img_box img {
  width: 25px;
  cursor: pointer;
}

.is_opacity {
  opacity: 0.5;
}

>>>.Content {
  height: 84vh !important;
}
</style>
